<template>
    <div class="pageDiv">
      <vxe-pager
        perfect
        align="left"
        size="small"
        :current-page="pageData.currentPage"
        :page-size="pageData.pageSize"
        :page-sizes="pageData.pageSizes"
        :total="pageData.totalResult"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
        @page-change="handlePageChange"
      ></vxe-pager>
    </div>

</template>

<script>
export default {
  name: 'app',
  props:['pageData'],
  data() {
    return {
      // tablePage: {
      //   currentPage: 1,
      //   pageSize: 10,
      //   totalResult:20
      // }
    }
  },
  methods: {
      handlePageChange({ currentPage, pageSize }) {
        this.$emit('pageChange',currentPage,pageSize)
      // this.pageData.currentPage = currentPage
      // this.pageData.pageSize = pageSize
      // this.findList()
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .vxe-pager--total {
  color: #000;
}
.pageDiv {
  padding-left: 15px;
  border-top: 1px solid #f0f0f0;
}
::v-deep .vxe-pager.size--small {
  height: 49px;
}
::v-deep .vxe-pager.is--perfect {
  border: none;
}
</style>

